<template>
    <div class="root">
        <div class="return" @click="tolist()"><img src="@/assets/return.png"><span>返回</span></div>
        <el-card class="title box-card">
            <div class="t">
                <div class="t1">{{ myinfo.title }}</div>
                <div class="t2">
                    <img src="@/assets/autor.png"/>{{ myinfo.teacher.name }}
                    <img src="@/assets/time.png"/>{{ myinfo.time }}
                    <img v-if="flag" @click="love()" src="@/assets/love1.png"/>
                    <img v-else @click="love()" src="@/assets/love.png"/>{{ myinfo.likeNums }}
                </div>
            </div>
            <hr>
            <div class="c"> {{ myinfo.content }}</div>
        </el-card>
        <el-card class="comments box-card">
            <div class="all">
                <div class="aa">
                    <span class="a">评论</span><span class="b">({{ replys.length }})</span>
                </div>
                <div class="comNew" @keyup.ctrl.enter="replyUp()">
                    <el-input
                        type="textarea"
                        placeholder="写下自己的想法"
                        v-model="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 2}"
                    >
                    </el-input>
                    <div class="btn"><div class="tip">Tip&nbsp;:&nbsp;&nbsp;Enter换行；Ctrl+Enter提交</div> <el-button type="danger" plain @click="replyUp()">发表</el-button> </div>
                </div>
                <div class="coms">
                    <div class="com" v-for="(item,index) in replys" :key="item.id">
                        <div class="name">
                            <div class="n">{{ item.student.name }}</div>
                            <div class="time"><img src="@/assets/time.png"/>{{ item.time }}</div>
                        </div>
                        <div class="replay">
                            <div>{{ item.content }}</div>
                            <div class="good">
                                <img v-if="flagGood[index]" @click="good({index,id:1})" src="@/assets/good2.png"/>
                                <img v-else @click="good({index,id:1})" src="@/assets/good.png">
                                {{item.likeNums}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </el-card>
    </div>
</template>

<script>

export default {
    name: "Forum-info",
    data() {
        return {
            userinfo: this.$GLOBAL.userinfo.userinfo,
            myinfo: {},
            replys: [],
            flag: false,
            flagGood: [],
            textarea: ""
        }
    },
    methods: {
        tolist() {
            let list = this.$GLOBAL.tuiJianList;
            this.$router.push({name: "ForumList", params: {list}})
        },
        love() {
            this.flag = !this.flag;
            if (this.flag){
                this.myinfo.likeNums=this.myinfo.likeNums+1
            }else{
                this.myinfo.likeNums=this.myinfo.likeNums-1
            }
        },
        good(good) {
            console.log(good,this.flagGood[good.index])
            this.flagGood[good.index] = !this.flagGood[good.index];
            if (this.flagGood[good.index]){
                this.replys[good.index].likeNums=this.replys[good.index].likeNums+1
            }else{
                this.replys[good.index].likeNums=this.replys[good.index].likeNums-1
            }
        },
        replyUp() {
            if (this.textarea !== '') {
                console.log(this.textarea);
                let newRe={
                    content:this.textarea,
                    discussionId:this.myinfo.id,
                    responderId:this.userinfo.id,
                    time:this.$util.parseTime(Date.now()),
                    likeNums:0,
                }
                this.$set(this.replys,this.replys.length,newRe)
                this.$store.commit("updateReplys",this.replys)
                console.log("test",this.replys)
            }
        }

    },
    mounted() {
        console.log("mounted()")
        this.myinfo = this.$route.params.info;
        this.replys = this.myinfo.replys;
        console.log("replys", this.replys)
        console.log("test_info", this.$route.params.info);
    },
    watch:{
        '$store.state.info':function (newVal){
            console.log("watch-info",newVal)
            console.log(this.$store.state.info)
            this.myinfo=newVal;
            this.replys = this.myinfo.replys;
        },
        '$store.state.replys':function (newVal){
            console.log("watch-info",newVal)
            console.log(this.$store.state.replys)
            this.replys = newVal;
        }
    }
}
</script>

<style scoped>
.coms .com {
    background-color: #faf8f8;
    margin: 20px 0;
    padding: 10px;
    border-radius: 2%;
}
.coms .com:hover{
    box-shadow: 2px 3px 10px #ded4d4;
}
.coms .com img {
    width: 20px;
    height: 100%;
    margin-right: 5px;
}

.coms .com .time,.good {
    display: flex;
    align-items: center;
}

.coms .com .replay,.name {
    display: flex;
    align-items: flex-end;
}
.coms .com .name .n{
    font-size: 25px;
    margin-right: 20px;
}
.coms .com .replay{
    font-size: 20px;
    margin-top: 10px;
    justify-content: space-between;
}

.all {
    padding: 0 50px 0;
}
.comNew .btn{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.comNew .btn .tip{
    color: #99a9bf;
}
.comments .aa {
    margin: 20px 0;
}

.comments .aa .a {
    font-size: 25px;
}

.comments .aa .b {
    font-size: 15px;
    margin-left: 10px;
    color: #99a9bf;
}

.title {
    height: 500px;
}

.title hr {
    margin: 20px 0;
}

.title .t .t1 {
    font-size: 40px;
    margin-bottom: 10px;
}

.title .t .t2 {
    display: flex;
    align-items: center;
}

.title .t img {
    width: 20px;
    height: 100%;
    margin-right: 5px;
}

.title .t img:not(:nth-child(1)) {
    margin-left: 30px;
}

.root {
    flex-direction: column;
    align-items: flex-start;
}

.return {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.return img {
    height: 100%;
    width: 20px;
    margin-right: 5px;
}

.return span:hover {
    color: deepskyblue;
}

.el-card {
    width: 100%;
    margin-bottom: 20px;
}
</style>
